import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect  } from 'dva'
import { Button, Icon,Dropdown,Menu} from 'antd'
import List from './list'
import styles from './index.less'
import Detail from './detail'
import Addorder from './addorder'
import Edit from './edit'
import IndexList from './IndexList'
function Order ({ location, dispatch, order, loading }) {
 const { list,detail,pagination,AddorderTags,DetailTags,Editstags,IndexListStyle,orderStatus} = order
 const ListsProps  ={
     dataSource:list,
     orderStatus,
     pagination,
     loading,
     detail,
     location,
     query(data){
        dispatch({
            type: 'order/query',
            payload:data
        })
     },
     onDetail(data){
         dispatch({
            type: 'order/detail',
            payload:data
        })
     },
     onEdit(data){
        dispatch({
            type:'order/showEdits',
            payload:data
        })
     },
 }
 const IndexListProps = {
     dataSource:list,
     pagination,
     loading,
     location,
     onPageChange (data){
        dispatch({
            type: 'order/query',
            payload:data
        })
     },
     onDetail(data){
         dispatch({
            type: 'order/detail',
            payload:data
        })
     },
     onEdit(data){
        dispatch({
            type:'order/showEdits',
            payload:data
        })
     },
 }
 const detailProps = {
     detail:detail,
 }
 const addProps = {
     onAdd(data){
         dispatch({
            type:'order/AddOrder',
            payload:{
                data:data,
                page:pagination,
                orderStatus:orderStatus
            }
        })
     }
 }
 const editPprops ={
     detail:detail,
     onClose(){
        dispatch({
            type:'order/showDetail',
        })
     },
     onOk(data){
         dispatch({
            type:'order/updates',
            payload:{
                data:data,
                page:pagination
            }
        })
     }
 }
 const onAddOrder = ()=>{
    dispatch({
        type:'order/showAdd'
    })
 }

 const handleMenuClick =(e)=>{
    dispatch({
        type: 'order/query',
        payload:{
            orderStatus:e.key,
            total:0,
            current:1,
            pageSize:10,
        }
    })
}
 const menu = (
    <Menu onClick={handleMenuClick}>
        <Menu.Item key="">全部订单.</Menu.Item>
        <Menu.Item key="0">待接单</Menu.Item>
        <Menu.Item key="1">待发货</Menu.Item>
        <Menu.Item key="2">发货中</Menu.Item>
        <Menu.Item key="5">已送达</Menu.Item>
        <Menu.Item key="9">已评价</Menu.Item>
        <Menu.Item key="10">已作废</Menu.Item>
        <Menu.Item key="11">已删除</Menu.Item>
    </Menu>
);
const OrderType =(e)=>{
    let text =''
    switch(e){
        case '0':
            text = '待接单'
            break;
        case '1':
            text = '待发货'
            break;
        case '2':
            text = '发货中'
            break;
        case '5':
            text = '已送达'
            break;
        case '8':
            text = '已评价'
            break;
        case '10':
            text = '已作废'
            break;
        case '11':
            text = '已删除'
            break;
        default:
        text = '全部订单'        
    }
    return text
}
const AddorderTag ={
    display:AddorderTags?'block':'none'
}
const DetailTag ={
    display:DetailTags?'block':'none'
}
const Editstag ={
    display:Editstags?'block':'none'
}
const IndexListShow = {
    display:IndexListStyle ? 'block':'none'
}
const IndexListHide= {
    display:IndexListStyle ? 'none':'block'
}
 const Addorders =()=> <Addorder {...addProps}/>
 const Edits =()=><Edit {...editPprops}/>
 const IndexLists =()=> <IndexList {...IndexListProps}/>
  return (
    <div className={styles.centerbox}>
        <div style={IndexListShow}>
            <IndexLists/>
        </div>
        <div style={IndexListHide}>
            <div className={styles.userList}>
                <div className={styles.title}>
                <div className={styles.left}>
                    <Dropdown overlay={menu}
                >
                        <a style={{color:'#04021D'}}>
                        {OrderType(orderStatus)} <Icon type="down" />
                        </a>
                    </Dropdown>
                </div>
                <div className={styles.right}><Button className={styles.btnstyle} type="primary" icon="plus" onClick={onAddOrder}>添加订单</Button></div>
                </div>
                <List {...ListsProps}/>
            </div>
            <div className={styles.userInfo}>
                <div style={DetailTag}>
                    <Detail {...detailProps}/>
                </div>
                <div style={AddorderTag}>
                    <Addorders/>
                </div>
                <div  style={Editstag}>
                    <Edits/>
                </div>
            </div>
        </div>
    </div>
  )
}

Order.propTypes = {
  order:PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.bool,
}

export default connect(({ order, loading }) => ({ order, loading: loading.models.order }))(Order)
